<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border-collapse: collapse;
        }
        tr{
            border-bottom: 1px solid #ccc;
        }
        td,th{
            padding: 10px 30px;
        }
        span{
            padding: 5px;
            color: #fff;
        }
        .yellow{
            background-color: sandybrown;
        }
        .red{
            background-color: red;
        }
    </style>
</head>
<body>
    
    <div id="app">
        <h3>my todos list <span :class="warn" v-show="!(list.length == all)">{{list.length - all}}</span></h3>
        <input type="text" placeholder="请输入要做的内容" v-model="todo" @keyup.enter="push"><hr>
        <table>
            <tr>
                <th>#</th>
                <th>任务列表</th>
                <th>状态</th>
                <th>筛选</th>
                <th>操作</th>
            </tr>

            <tr v-for="(item,index) in filterList" :key="item.id">
                <td>{{index+1}}</td>
                <td>{{item.todo}}</td>
                <td><input type="checkbox" v-model="item.check"></td>
                <td>{{item.check}}</td>
                <td><button @click="del(item)">删除</button></td>
            </tr>
        </table>

        <input type="checkbox" v-model="showAll">显示全部<br>
        已完成{{all}}/总数{{list.length}}
    </div>

    <script src="../lib/Vue/vue.js"></script>
    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                list: [
                    {
                        id: 1,
                        check: false,
                        todo: '洗衣服'
                    },
                    {
                        id: 2,
                        check: false,
                        todo: '做饭'
                    },
                    {
                        id: 3,
                        check: false,
                        todo: '睡觉'
                    }
                ],
                todo: '',
                nextId: 4,
                showAll: false
            },
            methods: {
                push() {
                    if (this.todo.trim() == '') {
                        alert('任务不能是空吧')
                        return
                    } else {
                        var obj = {
                            id: this.nextId++,
                            check: false,
                            todo: this.todo.trim()
                        }
                        // 将输入的任务放入list
                        this.list.push(obj);
                        // 清除input框
                        this.todo = ''
                    }
                },
                del(item) {
                    var index = this.list.findIndex(el => {
                        return el.id == item.id
                    })
                    this.list.splice(index, 1)
                }
            },
            computed: {
                all() {
                    // var count = 0;
                    // this.list.forEach(el => {
                    //     if (el.check) {
                    //         count ++
                    //     }
                    // });
                    // return count;
                    return this.list.filter(el => {
                        return el.check == true
                    }).length
                },
                filterList() {
                    var newarr = [];
                    this.list.forEach(el => {
                        if (!el.check || this.showAll) {
                            newarr.push(el)
                        }
                    })
                    return newarr
                },
                warn() {
                    return this.list.length - this.all > 3 ? 'red' : 'yellow'
                }
            }
        })
    </script>
</body>
</html>